// WpsHelper.jsx
import React, { useEffect, useState } from 'react';
import { Card, Modal, Button, Typography, Divider } from 'antd';
import { CalculatorOutlined } from '@ant-design/icons';
import { renderMath } from './mathjax';

const { Title, Paragraph, Text, Link } = Typography;

const WpsHelper = () => {
  const [open, setOpen] = useState(false);

  useEffect(() => { renderMath(); }, [open]);

  const formula = '\\(\\sqrt{(x_1 - x_2)^2 + (y_1 - y_2)^2 + (z_1 - z_2)^2}\\)';

  return (
    <div style={{ padding: '24px', maxWidth: 880, margin: '0 auto' }}>
      <Card>
        <Title level={2} style={{ marginBottom: 4 }}>
          <CalculatorOutlined style={{ marginRight: 8, color: '#52c41a' }} />
          任务一帮助页
        </Title>
        <Text type="secondary">使用 WPS 完成 KNN 算法与性别预测</Text>
        <Divider />

        <Title level={4}>目标</Title>
        <Paragraph style={{ lineHeight: 2 }}>
          <ol>
            <li>使用 WPS 实现 KNN 算法</li>
          </ol>
        </Paragraph>

        <Title level={4}>流程</Title>
        <Paragraph style={{ lineHeight: 2 }}>
          <ol>
            <li>在 F3 单元格填写距离公式</li>
            <li>对 F 列进行排序</li>
            <li>在 M3 单元格（K 下）填入 K 值</li>
            <li>多测试几个数据，观察 K 值选择对预测性别的影响</li>
          </ol>
        </Paragraph>

        <Title level={4}>注意点</Title>
        <Paragraph style={{ lineHeight: 2 }}>
          <ol>
            <li>公式：<span dangerouslySetInnerHTML={{ __html: formula }} /></li>
            <li>在 WPS 中乘方的符号是 ^</li>
            <li>测试用例需绝对引用，绝对引用的符号是 $，如测试身高在 J2 单元格，在公式中应写成 J$2。</li>
            <li>公式写好后排序：数据 → 升序</li>
          </ol>
        </Paragraph>

        {/* 示例图 */}
        <div style={{ textAlign: 'center', margin: '16px 0' }}>
          <img
            src={`${process.env.PUBLIC_URL}/static/1.png`}
            alt="排序示例"
            style={{ maxWidth: '80%' }}
          />
        </div>

        <Paragraph style={{ lineHeight: 2 }}>
          <ol start={5}>
            <li>
              公式终极帮助：
              <Button
                size="small"
                type="primary"
                style={{ marginLeft: 8 }}
                onClick={() => setOpen(true)}
              >
                show me the code
              </Button>
            </li>
          </ol>
        </Paragraph>
      </Card>

      <Modal
        open={open}
        title="公式代码"
        footer={null}
        onCancel={() => setOpen(false)}
        maskClosable
      >
        <Text code copyable>
          ((C3-$J$3)^2+(D3-$K$3)^2+(E3-$L$3)^2)^0.5
        </Text>
        <div style={{marginTop:10}}>在F3单元格中输入等号，然后把上面的公式复制进去</div>
      </Modal>
    </div>
  );
};

export default WpsHelper;